<template>
	<view class="side-bar" :style="{height: `calc(100vh - ${headerHeight}px)`}">
		<view class="wrap">
			<van-sidebar :activeKey="sideActiveKey" @change="handleChange">
			  <van-sidebar-item v-for="(item, index) in dataList" :key="item[0].text">
					<template #title>
						<view class="title">
							{{item[0].text}}
							<van-icon v-if="item[0].is_hot_show" name="hot" color="rgb(245,63,63)" size="40rpx" />
						</view>
					</template>
				</van-sidebar-item>
			</van-sidebar>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: "side-bar",
		data() {
			return {

			}
		},
		props: ['headerHeight'],
		computed: {
			...mapState({
				mapScrollTop: state => state.order.mapScrollTop,
				sideActiveKey: state => state.order.sideActiveKey,
				dataList: state => state.order.dataList,
			})
		},
		methods: {
			handleChange(e) {
				this.$emit('on-click-side', e.detail)
			}
		},
		mounted() {
			setTimeout(() => {
				console.log(this.dataList);
			}, 2000)
		}
	}
</script>

<style lang="scss">
	page {
		--sidebar-selected-border-color: #fff;
		--sidebar-text-color: #adaeae;
	}

	.side-bar {
		background-color: #f2f2f2;
		overflow-y: scroll;
		
		.wrap {
			padding-bottom: 140rpx;
		}
		
		.title {
			position: relative;
			font-size: 30rpx;
			van-icon {
				// width: 28rpx;
				// height: 28rpx;
				position: absolute;
				top: -20rpx;
				right: -30rpx;
			}
		}
	}
</style>